<template>
	<div class="imgMap">
		<h1>地图</h1>
		<div class="mapBox">
			<img src="../../assets/img/map.jpg"/>
			<div class="coordBox" :data-id="index" v-for="(val,index) in mapArr" :key="index">
			<div class="coordB" :style="{top:val[0],left:val[1]}">
				<span class="coords">
					<el-popover
					    placement="top"
					    trigger="click"
					    >
					    <div class="mapDialog">
					    	<h3>编辑坐标</h3>
					    	<p>当前模式: <span>全景图</span></p>
					    	<el-button class="replaceBtn" @click="changeType(index)">更换模式</el-button>
					    </div>
					    <el-button slot="reference">click 激活</el-button>
					 </el-popover>
				</span>
			</div>
			</div>
			<!--对话框-->
			<el-dialog :title="'编辑坐标  '+idx" :visible.sync="dialogFormVisible">
				<div class="mapType">
					<p>类型</p>
					<template class="mapRadio" @change="changBlock(radio)">
					  <el-radio v-model="radio" label="1">全景图</el-radio>
					  <el-radio v-model="radio" label="2">轮播图</el-radio>
					</template>
				</div>
			  <el-form  class="mapForm">
			  	  <p>全景图链接</p>
			      <el-input v-model="input" autocomplete="off"></el-input>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button type="warning" @click="subBtn">提交</el-button>
			  </div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				//表单数据
				 dialogFormVisible: false,
			     input:'',
			     formLabelWidth: '120px',
			     mapArr:[["70%","75%"],["70%","44%"],["54%","52%"],["41.5%","39%"],["41.5%","54%"],["13%","30%"],["28%","19%"],["54.6%","10%"]],
			     radio: '1',
			     idx:0,
			     imgUrl:""
			}
		},
		methods:{
			changeType(num){
				this.dialogFormVisible = true;
				this.$require.get(this.$config1.vrList)
				.then((res)=>{
					console.log(res)
					this.idx=res.data.data.rows[num].id ;
					this.imgUrl=res.data.data.rows[num].href
					this.input=res.data.data.rows[num].href
				})
			},
			subBtn(num){
				this.dialogFormVisible = false;
				this.$require.get(this.$config1.vrList)
				.then((res)=>{
					console.log(res)
					this.idx=res.data.data.rows[num].id ;
					this.input=res.data.data.rows[num].href
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.imgMap{
		margin: 20px auto 0px;
		/*width:%;*/
		height: 100%;
		padding: 0 30px;
		h1{
			font-size: 32px;
		}
	}
	.mapBox{
		width: 1000px;
		height: 500px;
		position: relative;
		img{
			width: 100%;
		}
	}
	.coordB{
		position: absolute;
		top:0;
		left: 0;
		width: 50px;
		height: 50px;
		background: transparent;
		border-radius:50%;
		border:10px solid #0000FF;
		overflow: hidden;
	}
	.coords{
		position: absolute;
		left:50%;
		top: -10px;
		transform: translateX(-50%);
		width: 50px;
		height: 50px;
		span{
			border:0;
		}
		.el-button:focus, .el-button:hover {
		     color: transparent; 
		     border:0; 
		     background:none; 
		}
		.el-button:active {
		     color:transparent; 
		    border: none;
		    outline: 0;
		}
		.coords .el-button[data-v-e516bb16]:focus, .coords .el-button[data-v-e516bb16]:hover {
		     color: transparent; 
		     border:none ; 
		     background: none; 
		}
		.el-button {
			width: 50px;
			height: 50px;
		    display: inline-block;
		    line-height: 1;
		    /* white-space: nowrap; */
		    cursor: pointer;
		    background:transparent;
		    border: none;
		    color:transparent;
		    -webkit-appearance: none;
		    text-align: center;
		    -webkit-box-sizing: border-box;
		    box-sizing: border-box;
		    outline: 0;
		    margin: 0;
		    -webkit-transition: .1s;
		    transition: .1s;
		    font-weight: 500;
		    padding: 12px 20px;
		    font-size: 0px;
		    border-radius: 50%;
		}
	}
	.mapDialog{
		width: 250px;
		height: 130px;
		padding-left: 20px;
		p{
			margin: 20px 0;
		}
	}
	
	.mapType{
		display: flex;
		align-content:flex-start;
		align-items: center ;
		height: 30px;
		p{
			width: 50px;
			font-size: 14px;
			font-weight: 700;
		}
		.mapRadio{
			margin-top: 10px;
		}
	}
	.mapForm{
		margin-top: 20px;
		p{
			font-size: 14px;
			font-weight: 700;
			margin-bottom: 10px;
		}
	}
	.dialog-footer{
    	text-align: left;
	}
</style>